.letter{
    background-color: rgb(250, 235, 237);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    &_content{
        width: 100%;
        margin:20rpx 20rpx;
        background-color: #ffffff;
        min-height: 520rpx;
        max-height: 520rpx;
        border-radius: 4rpx;
        border: 1px solid #d9d9d9;
        color: #666;
        padding: 10rpx 20rpx;
        overflow: hidden;
        position: relative;
        &_flower{
            background-image: url('https://love-1300086122.file.myqcloud.com/bg/flower.png');
            background-size: 100% 100%;
            z-index: 2;
            height: 215rpx;
            width: 160rpx;
            position: absolute;
            left: -20rpx;
            top: -30rpx;
        }
        &_title{
            height: 96rpx;
            font-size: 36rpx;
            border-bottom: 1px solid #d9d9d9;
            display: flex;
            align-items: center;
            justify-content: center;
            letter-spacing: 4rpx;
        }
        &_main{
            font-size: 30rpx;
            &_to{
                margin-top: 16rpx;
                color: #FF9B91;
            }
            &_from{
              color: #FF9B91;
              display: flex;
              justify-content: flex-end;
              margin-bottom: 20rpx;
            }
            &_letter{
              margin: 20rpx 0;
              min-height: 40px;
              -webkit-animation:minHeight 4s;
              -webkit-animation-fill-mode:forwards;
            }
        }
        &_full{
            -webkit-animation:contentHeight 5s;
            -webkit-animation-fill-mode:forwards;
            // position: absolute;
        }
        &_img{
          background-image: url('https://love-1300086122.file.myqcloud.com/bg/envelope.png');
          background-size: 100% 100%;
          height: 200px;
          position: absolute;
          bottom: -10px;
          left: -10px;
          right: -10px;
          z-index: 2;
          &_full{
            -webkit-animation:marginTop 5s;
            -webkit-animation-fill-mode:forwards;
          }
        }
    }

    @-webkit-keyframes contentHeight
    {
        from {
        }
        to {
          max-height: 1200vh;
        }
    }
    @-webkit-keyframes minHeight
    {
        from {
        }
        to {
          min-height: calc(100vh - 320rpx);
        }
    }
    @-webkit-keyframes marginTop
    {
        from {
        }
        to {
          bottom:-320px
        }
    }

    
}

.letter_full{
    -webkit-animation:minLetterHeight 4s;
    -webkit-animation-fill-mode:forwards;
    @-webkit-keyframes minLetterHeight
    {
        from {
        }
        to {
          min-height:auto;
        }
    }
}